<template>
	<el-dialog title="" visible :append-to-body="true" class="wrap" size="tiny">
		<i class="el-icon-close close" @click="cancel" style="color: white;z-index: 99;"></i>
		<div class="bt">物品详情</div>
		<el-form label-width="100px" class="form">
			<el-form-item label="物品名称">
				<el-input v-model="form.wpmc" :readonly="true" icon="info" class="select-block"></el-input>
			</el-form-item>
			<el-form-item label="所属分类">
				<el-input v-model="form.ssfl" :readonly="true" icon="info" class="select-block"></el-input>
			</el-form-item>
			<el-form-item label="单位">
				<el-input v-model="form.dw" :readonly="true" icon="info" class="select-block"></el-input>
			</el-form-item>
			<el-form-item label="状态">
				<el-input v-model="form.zt" :readonly="true" icon="info" class="select-block"></el-input>
			</el-form-item>
			<el-form-item label="是否配件">
				<el-input v-model="form.ispj" :readonly="true" icon="info" class="select-block"></el-input>
			</el-form-item>
			<el-form-item label="描述">
				<el-input v-model="form.ms" :readonly="true" type="textarea" :rows="2" icon="info" class="select-block"></el-input>
			</el-form-item>
			<hr />
			<el-table :data="dataList" stripe style="width: 100%">
				<el-table-column prop="pjmc" label="配件名称"></el-table-column>
				<el-table-column prop="dw" label="单位"></el-table-column>
				<el-table-column prop="cnt" label="当前库存"></el-table-column>
			</el-table>
		</el-form>
		<el-button type="primary" class="submit" @click="cancel">确定</el-button>
	</el-dialog>
</template>

<script type="text/javascript">
	import qs from 'qs'
	export default {
		props: ['params'],
		data() {
			return {
				form: {
					ssfl: '',
					wpmc: '',
					dw: '',
					zt: '',
					ms: '',
					id: ''
				},
				dataList: [],
			}
		},
		created() {
			this.form.id = this.params.row.wpid;
			this.loadinfo();
			this.loadinfo2();
		},
		methods: {
			loadinfo() {
				var logininfo = JSON.parse(localStorage.logininfo);
				var params3 = qs.stringify({
					xxid: logininfo.xxid,
					yhid: logininfo.id,
					wpid: this.form.id
				});
				this.axios.post(this.$store.state.api + 'wpfx/getinfo', params3)
					.then(res => {
						this.form = res.data.data.list[0];
					}).catch(res => {
						this.$message.warning("服务器异常");
						this.$emit('close', {
							type: 'wpxq',
							cancel: true
						});
					})
			},
			loadinfo2() {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
		    	var params2 = qs.stringify({ 
					wpid: this.form.id
				});
					//执行
				this.axios.post(this.$store.state.api + 'wpfx/getpjxx', params2)
					.then(res => {
						this.dataList = res.data.data.list
					}).catch(res => {
						this.$message.warning("服务器异常");
					})
			},
			cancel() {
				this.$emit('close', {
					type: 'wpxq',
					cancel: true
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.wrap {
		text-align: center;
	}
	
	.bt {
		position: absolute;
		width: 100%;
		height: 50px;
		margin: 0 auto;
		top: 0;
		left: 0;
		background: #50BFFF;
		color: white;
		text-align: left;
		line-height: 50px;
		font-size: 17px;
		padding-left: 15px;
	}
	
	.form {
		text-align: left;
	}
	
	.input {
		width: 300px;
		display: inline-block;
	}
	
	.select-block {
		display: block;
	}
	
	.submit {
		width: 120px;
	}
</style>